<template>
	<div class="dateSend">
		<div class="dateSend-nav">
			<span>到期代发</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/transaction' }">交易管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/transaction/dayDown' }">到期代发</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<hr>
		<div class="dateSend-bottom">
			<table border="1" rules="all">
				<tr>
					<th>
						<el-checkbox v-model="checked">全选</el-checkbox>
					</th>
					<th>序号</th>
					<th>客户姓名</th>
					<th>客户壹钱包账号</th>
					<th>交易类型</th>
					<th>业务场景</th>
					<th>交易状态</th>
					<th>资金状态</th>
				</tr>
				<tr v-for="item in dateSend" :key="item.id">
					<td>
						<el-checkbox v-model="checked"></el-checkbox>
					</td>
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.num}}</td>
					<td>{{item.trans}}</td>
					<td>{{item.business}}</td>
					<td>{{item.transState}}</td>
					<td>{{item.moneyState}}</td>
				</tr>
			</table>
			<el-button type="primary" style="float: right; margin-top: 30px;">申请代发</el-button>
		</div>
	</div>
</template>

<script>
	import {
		getDateSend
	} from '@/api/user/user.js'
	export default {
		data() {
			return {
				// 表格数据
				dateSend: [],
				// 复选款默认
				checked: true,
			}
		},
		created() {
			this.getTableData();
		},
		methods: {
			// 获取表格数据
			getTableData() {
				getDateSend("/list/datesend")
					.then(res => {
						this.dateSend = res.data.datesend;
						// console.log(this.dateSend);
					})
			}
		},
	}
</script>

<style scoped="scoped">
	.dateSend {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		min-width: 1000px;
		overflow: hidden;
		font-size: 16px;
		color: #333;
	}

	.dateSend .dateSend-nav {
		width: 97%;
		height: 20px;
		line-height: 20px;
		margin: 25px auto;
	}

	.dateSend-nav>span {
		display: block;
		width: 200px;
		height: 100%;
		float: left;
		font-size: 17px;
		color: #333;
		padding-left: 8px;
		border-left: 1px solid #0075d2;
	}

	.dateSend-nav .el-breadcrumb {
		float: right;
	}

	.dateSend hr {
		margin: 0 auto 25px;
		width: 96%;
		border: none;
		border-bottom: 1px solid #ddd;
		height: 0;
	}

	.dateSend .dateSend-bottom {
		width: 97%;
		margin: 0 auto;
	}

	.dateSend-bottom table {
		width: 100%;
		height: 400px;
		border: 1px solid #CCCCCC;
		font-size: 12px;
		color: #333;
	}

	.dateSend-bottom table th {
		background-color: #f5f6fa;
		height: 41px;
		font-weight: 400;
	}

	.dateSend-bottom table td {
		height: 45px;
		text-align: center;
		line-height: 45px;
	}
</style>
